<template>
	<view class="page_box">
		<u-navbar :is-back="false" title=" " v-if="1" :border-bottom="false">
			<view class="margin-left-sm">
				<text class="text-bold f34" style="margin-right: 10rpx;">成都</text>
				<u-icon name="arrow-down" color="#232323" size="24"></u-icon>
			</view>
		</u-navbar>
		
		<view class="content_box u-skeleton">
			<u-swiper :list="imglist" mode="round" indicator-pos="bottomCenter" border-radius="0" height="440" class="u-skeleton-rect"></u-swiper>
			<u-divider bg-color="#F9F9F9" height="120" half-width="48" fontSize="30" border-color="#D3D3D3" color="#000000">为你推荐</u-divider>
			<view class="content-item flex flex-wrap justify-between">
				<view @click="jump('/pages/decoration_hall/decoration_hall')" class="u-skeleton-fillet box-item bg-img" style="background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/bg_zsdt.png);">
					<view class="text-title">装修装饰大厅</view>
					<view class="text-tipc">一站式装修</view>
				</view>
				<view @click="jump('/pages/carHall/carHall')" class="u-skeleton-fillet box-item bg-img" style="background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/bg_qcdt.png);">
					<view class="text-title">汽车大厅</view>
					<view class="text-tipc">一站式购车</view>
				</view>
				<view @click="jump('/pages/communityXiaoyiwu/communityXiaoyiwu')" class="u-skeleton-fillet box-item bg-img" style="background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_sqxyw.png);">
					<view class="text-title">社区小义乌</view>
					<view class="text-tipc">无人批发店</view>
				</view>
				<view @click="jump('/pages/robotHall/robotHall')" class="u-skeleton-fillet box-item bg-img" style="background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/bg_jqrdt.png);">
					<view class="text-title">机器人大厅</view>
					<view class="text-tipc">生活助手</view>
				</view>
			</view>
			<!-- <navigator hover-class="none" url="../funEarn/hall_rules?page_title={{page_title}}" class="flex justify-center align-center">
				<u-icon name="question-circle" size="32" color="#999999"></u-icon>
				<text class="f26 margin-left-sm" style="color: #999999;font-family: PingFang SC, PingFang SC-Medium;font-weight: 500;">使用规则</text>
			</navigator> -->
		</view>
		
		<!--骨架组件-->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
		<!-- 弹窗 -->
		<u-mask :show="show_mask">
			<view class="warp">
				<view class="mask-content bg-img">
					<view class="mask-box">
						<view class="text-them text-center">暂未开放 敬请期待</view>
						<view class="text-them margin-top-sm text-center"><text class="f22">您是否想要此功能？</text></view>
						<view class="margin-top-sm">
							<u-radio-group size="24"  active-color='#7C633F' @change="radioChange" class="flex justify-center">
								<u-radio label-size="24" name="非常需要">非常需要</u-radio>
								<u-radio label-size="24" name="需要">需要</u-radio>
								<u-radio label-size="24" name="不需要">不需要</u-radio>
							</u-radio-group>
						</view>
						<view class="btn-box">
							<view class="mask-btn" @click="show_mask = false">确认</view>
						</view>
					</view>
				</view>
				<u-icon style="margin-top: 50rpx;" name="close-circle" color="#ffffff" size="50" @click="show_mask = false"></u-icon>
			</view>
		</u-mask>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {			
			imglist:[
				"https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/banner.png",
				"https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/banner.png"
			],
			show_mask:false,
			loading:true,
			page_title:"规则大厅"
		};
	},
	onShow() {},
	onLoad(e) {
		// 通过延时模拟向后端请求数据，调隐藏骨架屏
		setTimeout(() => {
			this.loading = false;
		}, 1000)
	},
	mounted() {},
	methods: {
		jump(e){
			
			this.l.to(e)
		},
		radioChange(e){
			//console.log(e);
		},
	}
};
</script>

<style lang="scss" scoped>
.page_box{
	width: 100vw;
	height: 100vh;
	background-color: #F9F9F9;
}
.content-item{
	padding: 32rpx;
	.box-item{
		width: 48%;
		height: 180rpx;
		padding: 50rpx 20rpx 0;
		margin-bottom: 30rpx;
		.text-title{
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #232323;
		}
		.text-tipc{
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			color: #717171;
			margin-top: 30rpx;
		}
	}
}
.warp {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 100%;
	.mask-content{
		background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210619135313.png);
		background-size: 100%;
		width: 85%;
		min-height: 700rpx;
		.mask-box{
			position: relative;
			top: 300rpx;
			padding: 30rpx;
			.text-them{
				color: #7c633f;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				line-height: 50rpx;
			}
			.btn-box{
				margin-top: 30rpx;
				text-align: center;
				.mask-btn{
					background: #ec7066;
					border-radius: 40rpx;
					padding: 20rpx 86rpx;
					color: white;
					font-size: 28rpx;
					text-align: center;
					display: inline-block;
				}
			}				
		}
	}
	.icon-btn{
		margin-top: 50rpx;
	}
}
</style>
